<template>
  <div class="card">
    <div class="card-header">
      <span class="title">{{ curSpace.title }}</span>
      &nbsp;的成员
      <el-tag type="info" size="mini" class="m-l-10">{{ curSpace.membersCount }}</el-tag>
      <el-checkbox
        v-if="isWebAdmin || isSpaceOwner"
        size="mini"
        v-model="editing"
        border
        class="m-l-16 bg-fff"
      >管理成员</el-checkbox>
      <query-nickname class="m-l-auto" no-router :nickname.sync="nickname" />
    </div>
    <div class="card-content custom-table" v-loading="loading" style="min-height: 4rem;">
      <members-list-item
        v-for="member in members"
        :key="member.id"
        :member="member"
        :editing="editing"
      />
      <pagination
        no-router
        :current-page="pagination.current"
        :page-count="pagination.count"
        :page.sync="page"
      />
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex';
import QueryNickname from '@/components/query-nickname';
import MembersListItem from './members-list-item';
import { formatMembers } from '../format';

export default {
  name: 'members-list',
  components: {
    QueryNickname,
    MembersListItem,
  },
  data() {
    return {
      members: [],
      loading: false,
      page: 1,
      nickname: '',
      pagination: {
        current: null,
        count: null,
      },
      editing: false, // 管理模式
    };
  },
  computed: {
    ...mapState({ curSpace: 'currentSpace' }),
    ...mapGetters(['isWebAdmin', 'isSpaceOwner']),
    loadMembersParams() {
      return {
        spaceId: this.$route.params.spaceId,
        searchName: this.nickname,
        page: this.page,
      };
    },
  },
  created() {
    this.loadMembers();
  },
  methods: {
    // 加载成员数据
    loadMembers() {
      this.loading = true;
      this.$api.spaceMembers.index(this.loadMembersParams)
        .then((res) => {
          this.members = formatMembers(res.data);
          this.pagination.current = res.kaminari.current_page;
          this.pagination.count = res.kaminari.total_pages;
        })
        .catch(() => {})
        .then(() => { this.loading = false; });
    },
  },
  watch: {
    loadMembersParams() { this.loadMembers(); },
  },
};
</script>

<style></style>
